<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" v-model="data.search">
      <el-form-item>
        <el-form-item label="任务名称">
          <el-input
            v-model="data.search.taskName"
            placeholder="任务名称"
          ></el-input>
        </el-form-item>

        <el-button type="primary" @click="querySysTaskGroup">查询</el-button>
      </el-form-item>
    </el-form>

    <yu-table
      ref="yuTable"
      :tableData="data.tableData"
      :columns="data.tableData.columns"
      @getSelectionRows="getSelectionRows"
    >
      <template #toolbar>
        <el-button-group class="ml-4">
          <el-button @click="addTask">新增</el-button>
          <el-button @click="delBatch">删除</el-button>
        </el-button-group>
      </template>
      <template v-slot:handleSlot="{ scopeData }">
        <el-button
          text
          type="success"
          size="small"
          @click="edit(scopeData.row, scopeData.row.rowIndex - 1)"
          >编辑
        </el-button>
        <el-button
          text
          size="small"
          type="danger"
          @click="del(scopeData.row, scopeData.row.rowIndex - 1)"
          >删除
        </el-button>
      </template>
    </yu-table>
    <yu-dialog :data="data.dialogConfig" v-model:isShow="data.isShow">
      <TaskGroupEdit
        :editData="data.editData"
        v-model:isShow="data.isShow"
      ></TaskGroupEdit>
    </yu-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onBeforeMount } from 'vue';
import TaskGroupEdit from './TaskGroupEdit.vue';
const { proxy } = getCurrentInstance();
const data = reactive({
  search: {},
  sysTaskGroup: [],
  tableData: { data: [], columns: [], tableArrts: { haspage: true } },
  editData: {},
  dialogConfig: {},
  isShow: false,
});
const addTask = () => {
  data.dialogConfig.title = '新增';
  data.dialogConfig.width = '500px';
  data.dialogConfig.height = '200px';
  data.isShow = true;
  data.editData = {};
};
const edit = (row, rowIndex) => {
  data.dialogConfig.title = '修改';
  data.dialogConfig.width = '500px';
  data.dialogConfig.height = '200px';
  data.isShow = true;
  data.editData = row;
};
data.tableData.columns = [
  { type: 'selection' },
  { title: '任务组名', key: 'groupName', align: 'center', width: 180 },
  { title: '操作', slot: 'handleSlot', width: 180 },
];
const querySysTaskGroup = () => {
  proxy.$api.system.getSysTaskGroupDict().then(res => {
    data.tableData.data = res; //更新数据
  });
};
</script>

<style lang="scss" scoped></style>
